<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button type="success" @click.stop="search">刷新</el-button>
        </div>
        <el-table :data="table" style="width: 400px" border>
          <el-table-column prop="percent" label="返比"></el-table-column>
          <el-table-column prop="percentName" label="返比类型"></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script>
import { getPercent, editPercent } from '@/network/api.js'

export default {
  name: 'percent',
  data() {
    return {
      table: []
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    async search() {
      try {
        const rtn = await getPercent({})
        this.table = [rtn]
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 编辑
    edit(row) {
      this.$prompt('请输入新的返比值', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([1-9]\d?)|(\d\.\d{1,2})|([1-9]\d\.\d{1,2}))$/,
        inputPlaceholder: row.percent,
        inputErrorMessage: '请输入正确的数字'
      })
        .then(async ({ value }) => {
          try {
            await editPercent({ percent: value })
            row.percent = value
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warning('您取消了当前操作')
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
